<template>
  <section class="messages__wrapper">
    <div class="stats-info">
      <div class="msgs-stats">
        已有<strong class="user-count">{{ userCount }}</strong
        >人在这留下了足迹
      </div>
      <div class="msgs-stats">
        留言总数：<strong class="user-count">{{ messageTotal }}</strong
        >条
      </div>
      <!-- 确实,把模态框放在评论区会好一点,再暴露一个弹出的窗口就好,毕竟你一开始没有信息是隐藏状态 -->
      <div class="modify-info" v-if="commentUserInfo" @click="showUserInfoForm">
        个人信息有误？点击修改<EditOutlined style="margin-left: 6px" />
      </div>
    </div>

    <Comments ref="commentRef" topic="留言" place-top :auto-load="false" />
  </section>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { EditOutlined } from '@ant-design/icons-vue';
import { useStore } from '@/store';
import { commentService } from '@/api/comment';
import Comments from './comments.vue';
// vuex
const store = useStore();
const commentUserInfo = computed(() => store.state.commentUserInfo);

const userCount = ref<number>(0);
const messageTotal = ref<number>(0);

// 获取留言总人数,直接上立刻执行函数
// 这里需要一个并发promise.all
(async function () {
  try {
    let [result, result2] = await Promise.all([
      commentService.numberOfPeople(),
      commentService.total(),
    ]);
    userCount.value = result.data;
    messageTotal.value = result2.data;
  } catch (error) {
    console.error(error);
  }
})();

// 显示状态栏,ref非常强大,能拿到组件里面的数据
const commentRef = ref();

const showUserInfoForm = () => {
  commentRef.value.ismodalVisible = true;
};
</script>

<style scoped lang="scss">
.msgs-stats {
  font-size: 12px;
  color: #999;
  text-align: center;
  padding-bottom: 10px;
}

.user-count {
  font-size: 16px;
  color: #333;
  font-weight: 700;
}

.modify-info {
  text-align: center;
  font-size: 10px;
  color: #999;
  margin-bottom: 10px;
  cursor: pointer;
}

:deep(.comment__wrapper) {
  box-shadow: 0 2px 12px rgb(7 17 27 / 12%);
}
</style>
